
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>后台管理系统</title>
    <style type="text/css">
        .clearfix:after{
            content: "";
            display: block;
            height: 0px;
            clear: both;
            visibility: hidden;
        }
        .nav{
            height: 60px;
            width: 100%;
            border: 1px black solid;
            line-height: 60px;
            border-radius: 15px;
        }
        .fir{
            margin-left: 150px;
        }
        .sen{
            margin-left: 300px;
        }

        .nav .thi{
            margin-left: 600px;
        }
        ul li{
            list-style: none;
        }

        .left{
            float: left;
            margin-top: 100px;
            width: 300px;
            text-align: center;
            height: 360px;
            line-height: 60px;
        }
        .right{
            margin-top: 100px;
            margin-right: 800px;
            float: right;
            display: none;

        }

    </style>
</head>
<body>
        <div class="nav">
            <span class="fir">系统管理</span>
            <span class="sen">欢迎登录后台管理系统</span>
            <span class="thi">
                    <a href="#">前台主页面</a>&nbsp;&nbsp;&nbsp;
                    <a href="#">退出系统</a>
                </span>
        </div>
        <div class="content clearfix">
            <div class="left">
                <ul>
                    <li onclick="show(this,event)">景点管理
                        <ul style="display: none;">
                            <li><a href="javascript:;" onclick="addScenery(0)" >添加</a></li>
                            <li><a href="javascript:;" onclick="sceneryManager(1)">管理景点</a></li>
                        </ul>
                    </li>
                    <li><a href="javascript:;" onclick="commentManager(2)">论坛管理</a></li>
                    <li onclick="show(this,event)">用户管理
                        <ul style="display: none;">
                            <li><a href="javascript:;" onclick="addAdmin(3)">添加</a></li>
                            <li><a href="javascript:;" onclick="adminManager(4)">管理用户</a></li>
                        </ul>
                    </li>
                    <li onclick="show(this,event)">酒店管理
                        <ul style="display: none;">
                            <li><a href="javascript:;" onclick="addHotel(5)">添加</a></li>
                            <li><a href="javascript:;" onclick="hotelManager(6)">管理酒店</a></li>
                        </ul>
                    </li>
                    <li><a href="javascript:;" onclick="travelManager(7)">游记管理</a>
                    </li>
                </ul>
            </div>
            <div class="right">
                <div class="rightmanager"><%@include file="addScenery.jsp"%></div>
                <div class="rightmanager"><%@include file="sceneryManager.jsp"%></div>
                <div class="rightmanager"><%@include file="commentManager.jsp"%></div>
                <div class="rightmanager"><%@include file="addAdmin.jsp"%></div>
                <div class="rightmanager"><%@include file="adminManager.jsp"%></div>
                <div class="rightmanager"><%@include file="addHotel.jsp"%></div>
                <div class="rightmanager"><%@include file="hotelManager.jsp"%></div>
                <div class="rightmanager"><%@include file="travelManager.jsp"%></div>
            </div>
        </div>

        <script type="text/javascript">

            function addScenery(obj) {
                var rightDiv=document.getElementsByClassName("rightmanager");
                var rightNode=document.getElementsByClassName("right")[0];
                rightNode.style.display="block";
                for(var i=0;i<rightDiv.length;i++){
                rightDiv[i].style.display="none";
            }
            rightDiv[obj].style.display="block";
            }
            function sceneryManager(obj) {
                var rightDiv=document.getElementsByClassName("rightmanager");
                var rightNode=document.getElementsByClassName("right")[0];
                rightNode.style.display="block";
                for(var i=0;i<rightDiv.length;i++){
                    rightDiv[i].style.display="none";
                }
                rightDiv[obj].style.display="block";
            }
            function commentManager(obj) {
                var rightDiv=document.getElementsByClassName("rightmanager");
                var rightNode=document.getElementsByClassName("right")[0];
                rightNode.style.display="block";
                for(var i=0;i<rightDiv.length;i++){
                    rightDiv[i].style.display="none";
                }
                rightDiv[obj].style.display="block";
            }
            function addAdmin(obj) {
                var rightDiv=document.getElementsByClassName("rightmanager");
                var rightNode=document.getElementsByClassName("right")[0];
                rightNode.style.display="block";
                for(var i=0;i<rightDiv.length;i++){
                    rightDiv[i].style.display="none";
                }
                rightDiv[obj].style.display="block";
            }
            function adminManager(obj) {
                var rightDiv=document.getElementsByClassName("rightmanager");
                var rightNode=document.getElementsByClassName("right")[0];
                rightNode.style.display="block";
                for(var i=0;i<rightDiv.length;i++){
                    rightDiv[i].style.display="none";
                }
                rightDiv[obj].style.display="block";
            }
            function addHotel(obj) {
                var rightDiv=document.getElementsByClassName("rightmanager");
                var rightNode=document.getElementsByClassName("right")[0];
                rightNode.style.display="block";
                for(var i=0;i<rightDiv.length;i++){
                    rightDiv[i].style.display="none";
                }
                rightDiv[obj].style.display="block";
            }
            function hotelManager(obj) {
                var rightDiv=document.getElementsByClassName("rightmanager");
                var rightNode=document.getElementsByClassName("right")[0];
                rightNode.style.display="block";
                for(var i=0;i<rightDiv.length;i++){
                    rightDiv[i].style.display="none";
                }
                rightDiv[obj].style.display="block";
            }
            function travelManager(obj) {
                var rightDiv=document.getElementsByClassName("rightmanager");
                var rightNode=document.getElementsByClassName("right")[0];
                rightNode.style.display="block";
                for(var i=0;i<rightDiv.length;i++){
                    rightDiv[i].style.display="none";
                }
                rightDiv[obj].style.display="block";
            }


            function show(obj,event){
                event.stopPropagation();
                var x=obj.getElementsByTagName('ul');
                if(x[0].style.display=="none"){
                    x[0].style.display="block";
                }else{
                    x[0].style.display="none";
                }
            }
            function test(e){
                e.stopPropagation();
            }
        </script>
</body>
</html>
